input[type=radio] {
  margin-left: 4px;
  margin-top: 0;
  -webkit-appearance: none;
  appearance: none;
  outline: none;
  border-radius: calc(var(--px-radius) + 4px);
  width: 24px;
  height: 24px;
  position: relative;
  vertical-align: middle;
  border: 1px solid var(--color-border);
  background-color: var(--color-element);
  float: right;
}

input[type=radio]:hover {
  background-color: var(--color-second);
}

input[type=radio]:active {
  background-color: var(--color-titlebar);
}

input[type=radio]::after {
  position: absolute;
  left: 4px;
  top: 4px;
  width: 12px;
  height: 12px;
  content: "";
  background-color: var(--color-titlebar);
  border-radius: var(--px-radius);
  transition: 0.25s;
  border: 1px solid var(--color-border);
}

input[type=radio]:active::after {
  background-color: var(--color-back);
}

input[type=radio]:checked::after {
  background-color: var(--color-top);
}

input[type=radio]:focus {
  box-shadow: var(--shadow-focus);
}